<template>
  <div class="app-container">


    <!-- vxe检索数据组件 -->
    <search-form
      ref="searchForm"
      :formSearchData.sync="formSearchData"
      :cvTypeOptions="cvTypeOptions"
      @searchEventEmit="searchEventEmit"
      @resetSearchEventEmit="resetSearchEventEmit"
    >
    </search-form>


    <!-- 表格组件 -->
    <ex-base-table
      ref="exBaseTable"
      :tableColumn="tableColumn"
      :tableData="tableData"
      :loading.sync="loading"
      :handleColsWidth="220"
      :isVxeCheckbox="true"
      :isDropdownMenuEvent="false"
      @handleRemoveEmit="handleRemoveEmit"
      @handleCreateEmit="handleCreateEmit"
      @handleUpdateEmit="handleUpdateEmit"
      @handleRmoveColEmit="handleRmoveColEmit"
      @customSortMethodEmit="customSortMethodEmit"
      @checkboxChangeDoublePageEmit="checkboxChangeDoublePageEmit"
      @checkboxAllDoublePageEmit="checkboxAllDoublePageEmit"
    >

      <!-- 表格工具组扩展插槽 -->
      <template v-slot:vxeToolbarExtend>
        <el-button size="mini" icon="el-icon-s-data" @click="handleGraphContrast">曲线图对比({{ checkboxAllRows.length || 0 }})</el-button>
        <!--
          on-preview	点击文件列表中已上传的文件时的钩子
          on-remove	文件列表移除文件时的钩子
          before-remove	删除文件之前的钩子，参数为上传的文件和文件列表，若返回 false 或者返回 Promise 且被 reject，则停止删除。
          on-exceed	文件超出个数限制时的钩子
          on-success	文件上传成功时的钩子	function(response, file, fileList)
          on-error	文件上传失败时的钩子	function(err, file, fileList)
         -->
        <el-upload
          class="upload-demo"
          :action="uploadUrl"
          :show-file-list="false"
          :before-upload="beforeAvatarUpload"
          :on-success="handleSuccess"
          :on-error="handleError"
          :headers="uploadHeaders"
          accept=".csv, application/vnd.ms-excel, application/vnd.openxmlformats-officedocument.spreadsheetml.sheet"
        >
          <el-button size="mini" icon="el-icon-document-add">导入</el-button>
          <!-- <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div> -->
        </el-upload>


        <el-button size="mini" icon="el-icon-export" @click="handlePushExportUrl">导出({{ checkboxAllRows.length || 0 }})</el-button>
      </template>


      <!-- 操作栏按钮扩展插槽 -->
      <template v-slot:handleExtend="{row}">
        &nbsp;
        <el-button v-if="true" size="mini" type="text" @click="viewSonTable(row)">
          价格设置
        </el-button>
      </template>
    </ex-base-table>


    <!-- 分页组件 -->
    <Pagination
      v-show="tablePage.totalResult>0"
      :total="tablePage.totalResult"
      :page.sync="tablePage.currentPage"
      :limit.sync="tablePage.pageSize"
      @pagination="pageFindList"
    />


    <!-- 表单提价组件 -->
    <submit-form
      ref="submitForm"
      :dialogFormVisible.sync="dialogFormVisible"
      :dialogStatus="dialogStatus"
      :formSubmitData="formSubmitData"
      :lpOptionscurr="lpOptionscurr"
      :lpOptions="lpOptions"
      :curvetypeOptions="curvetypeOptions"
      @handleFromUpdateDataEmit="handleFromUpdateDataEmit"
      @handleFromCreateDataEmit="handleFromCreateDataEmit"
      @resetFormDataEmit="resetFormSubmitData"
    >
    </submit-form>


    <el-dialog
      :title="DialogSonTableVisible_title"
      width="95%"
      :visible.sync="DialogSonTableVisible"
    >
      <ParamValMaintainTable
        ref="paramValMaintainTable"
        :currentRow="currentRow"
      />
    </el-dialog>


    <!-- 表单提价组件 -->
    <graph-contrast-submit-form
      ref="graphContrastSubmitForm"
      :dialogFormVisible.sync="graphContrastDialogFormVisible"
      :dialogStatus="graphContrastDialogStatus"
      :formSubmitData="graphContrastFormSubmitData"
      @handleFromSelectDateEvent="handleFromSelectDateEvent"
    >
    </graph-contrast-submit-form>

    <!-- 曲线图 -->
    <el-dialog
      :title="chartTitle"
      :visible.sync="DialogChartVisible"
      append-to-body
      >
      <ExManyLineChart
        :chart-data="lineChartData"
      />
    </el-dialog>


  </div>
</template>

<script>
// 这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
// import PageHeaderLayout from '@/layouts/PageHeaderLayout'
// import ApeDrawer from '@/components/ApeDrawer'
// import { mapGetters } from 'vuex'
import store from '@/store'
import {getToken} from '@/utils/auth'

import {
  addmarketInteresRateInFo,
  delmarketInteresRateInFo,
  fetchListcurr,
  findCv_code,
  findmarketInteresRateInFo,
  upmarketInteresRateInFo,
  findtype,
  findTransfercurvetermlist1,
  findTransfercurvetermlist
} from './service/baseApi'
//日期模糊查询
import XEUtils from 'xe-utils'
// 基础表格组件
import ExBaseTable from './components/ExBaseTable'
// 分页
import Pagination from '@/components/Pagination'
// 文章表单
import SubmitForm from './components/SubmitForm'
// 检索表单
import SearchForm from './components/SearchForm'
//信息提示框

import ParamValMaintainTable from './components/ParamValMaintainTable'

import resetFormSubmitData from '@/views/mixins/resetFormSubmitData'
import GraphContrastSubmitForm from './components/GraphContrastSubmitForm'
// 基础折线图图表
import ExManyLineChart from '@/components/Echarts/LineChart/ExManyLineChart'

export default {
  name: 'vxe-basetable',
  mixins: [resetFormSubmitData],
  components: {
    ExBaseTable,
    Pagination,
    SubmitForm,
    SearchForm,
    ParamValMaintainTable,
    GraphContrastSubmitForm,
    ExManyLineChart
  },
  // 定义属性
  data() {

    const XEUtilsLocat = XEUtils.locat()
    const hostName = XEUtilsLocat.hostname
    const protocol = XEUtilsLocat.protocol

    return {
      /* 上传 */
      uploadHeaders: {},
      uploadUrl: `${protocol}//${hostName}:7001/${process.env.VUE_APP_DATA_IO_URI_PARAM}/mirf/upload`,

      /* host信息 */
      hostName: hostName,
      protocol: protocol,
      // 检索条件
      formSearchData: {
        cv_type: [],
        cv_code: '',
        cv_name: '',
        data_date: [],
      },
      cvTypeOptions:[],

      // 排除条件
      sortField: '',
      sortFlag: '',

      /* 表单相关 */
      dialogFormVisible: false, // 修改删除弹出框
      dialogStatus: '',
      // 表单数据对象
      formSubmitData: {
        id: "",
        cv_code: "",
        cv_name: '',
        curr_code: "",
        cv_type: "",
        remark: '',
      },
      initFormSubmitData: {
        cv_name: '',
        cv_type: "",
        remark: '',
      },
      lpOptions: [],
      lpOptionscurr: [],
      curvetypeOptions: [],
      /* 分页相关 */
      tablePage: {
        currentPage: 1, //当前页
        pageSize: 10,  // 每一页页数
        totalResult: 0
      },
      /* 表格相关 */
      tableColumn: [], // 表格字段
      loading: false, //表格loading特效
      tableData: [],  //表格数据

      DialogSonTableVisible: false,
      DialogSonTableVisible_title:'',
      currentRow: {},

       // 多选维护字段
      checkboxAllRows:[],

      /* 曲线图对比 */
      graphContrastFormSubmitData:{
        id:'',
        date:'',
      },
      graphContrastDialogStatus:'selectDate',
      graphContrastDialogFormVisible:false,
      /* 曲线图 */
      chartTitle: '',
      DialogChartVisible: false,
      lineChartData: {
        tooltipFormatter: '',
        legendData: [],
        xAxisData: [],
        seriesData: []
      },
      lineChartColors: [
        '#5470c6',
        '#91cc75',
        '#fac858',
        '#ee6666',
        '#73c0de',
        '#3ba272',
        '#fc8452',
        '#9a60b4',
        '#ea7ccc'
      ],

    } //datareturn-end

  },
  // 计算属性，会监听依赖属性值随之变化
  computed: {},
  // 监控data中的数据变化
  watch: {},
  // 方法集合
  methods: {

    /* 跨页选择--start */
    /* 
      1.格式化对象，删除xrow 增加唯一识别字段 
      2.更新 多选维护字段  （删除：判断标识找到数组索引 通过splice删除该元素  增加：直接追加就可以）
      3. 渲染数据后从新识别选中数据
      4. data中定义 checkboxAllRows 
      5. 使用 tableData 变量 渲染
    */
    // 多选状态改变：跨页选中或取消
    checkboxChangeDoublePageEmit({ 
     records,
     reserves,
     indeterminates,
     checked,
     row,
     rowIndex,
     $rowIndex,
     column,
     columnIndex,
     $columnIndex, 
     $event 
     }){
      let formatD
      //格式化
      formatD = this.formattingCheckboxRow(row)
      console.log(formatD)
      // 被选中
      if(checked){
        this.checkboxAllRows.push(formatD)
      // 取消选中
      }else{
        const _index = this.checkboxAllRows.findIndex((val) => val.cid === formatD.cid);
        this.checkboxAllRows.splice(_index, 1);
      }

      // console.log('this.checkboxAllRows',this.checkboxAllRows)
    },
    // 多选状态改变：跨页选中或取消-全选按钮
    checkboxAllDoublePageEmit({ 
      records, 
      reserves, 
      indeterminates, 
      checked, 
      $event 
    }){
      console.log(records)
      console.log(reserves)
      console.log(indeterminates)
      // 被选中
      if(checked){
        XEUtils.arrayEach(records, (item, key) => {
          this.checkboxAllRows.push(this.formattingCheckboxRow(item))
        })
      // 取消选中
      }else{
        XEUtils.arrayEach(records, (item, key) => {
          const _index = this.checkboxAllRows.findIndex((val) => val.cid === item.cid);
          this.checkboxAllRows.splice(_index, 1);
        })
      }

    },
    // 格式化多选row
    formattingCheckboxRow(row){
      delete row['_XID']
      // 生成唯一值
      row['cid'] = JSON.stringify(row)
      return row
    },
    // 渲染数据后从新识别选中数据
    renderCheckboxRows(){
      let checkTableData = []
      // 如果有选中数据
      if(this.checkboxAllRows.length > 0){
        console.log('this.checkboxAllRows',this.checkboxAllRows)
        // 刷选中当前列表中被选中数据
        XEUtils.arrayEach(this.checkboxAllRows, (item, key) => {
          const _index = this.tableData.findIndex((val) => {
            return JSON.stringify(val) === item.cid
          })
          checkTableData.push(this.tableData[`${_index}`])
          // console.log(this.tableData[`${_index}`])
        })
        // 渲染勾选状态
        this.$nextTick(() => {
          this.$refs.exBaseTable.$refs.xTable.setCheckboxRow(checkTableData, true)
          console.log('this.checkboxAllRows',this.checkboxAllRows)
        })    
      }
    },
    /* 跨页选择--end */


    /* API数据操作相关 */
    findfindtype(){
      findtype().then(({data}) => {
        this.cvTypeOptions =  XEUtils.map(data.rows, item => {
          return {
            label:item.cv_type,
            value:item.cv_type
          }
        })
      })
    },
    async getfindCv_code() {
      return await findCv_code().then(({data}) => {
        return data.rows.cv_code
      })
    },

    async findfindTransfercurvetermlist(){
      return await findTransfercurvetermlist({
        ...this.graphContrastFormSubmitData
      }).then(({data}) => {
        return data.rows
      })
    },
    
    // 查询数据
    findList() {
      this.loading = true
      // 请求表格数据
      findmarketInteresRateInFo({
        page: this.tablePage.currentPage, // 当前页
        pageSize: this.tablePage.pageSize, // 每页条数
        sortField: this.sortField,
        sortFlag: this.sortFlag,
        // cv_type: this.formSearchData.cv_type,
        cv_type: this.formSearchData.cv_type.join(","),
        cv_code: this.formSearchData.cv_code,
        cv_name: this.formSearchData.cv_name,
        // s_date: (XEUtils.isArray(this.formSearchData.data_date) && this.formSearchData.data_date.length===2)?this.formSearchData.data_date[0]:'',
        // e_date: (XEUtils.isArray(this.formSearchData.data_date) && this.formSearchData.data_date.length===2)?this.formSearchData.data_date[1]:''
      }).then(({data}) => {
        // 给表格数据赋值
        this.tableData = data.rows
        // 给分页总数赋值
        this.tablePage.totalResult = data.total

        // 重置多选选中状态
        this.renderCheckboxRows()

        // 关闭加载特效
        setTimeout(() => {
          this.loading = false
        }, 0.5 * 1000)
      })
    },
    findcurr() {
      fetchListcurr({}).then(({data}) => {
        this.lpOptionscurr = data.rows
      })
    },
    /* 分页组件相关 */
    // 分页事件（页码切换，每页页数切换）
    pageFindList() {
      this.findList()
    },
    /* 表格组件相关 */
    // 初始化表格字段
    initTableCols() {
      const tabCols = [  //动态增加的字段 传进来的
        // { field: 'te_date', title: '生效日期', width: 200 , showOverflow: true},
        {field: 'cv_type', title: '曲线类型', width: 300, sortable: true},
        {field: 'cv_code', title: '曲线编号', width: 200},
        {field: 'cv_name', title: '曲线名称', width: 200},
        // {field: 'tp_name', title: '期限方案', width: 200},
        // {field: 'term_value', title: '期限点-利率值', width: 200},
        // {field: 's_date', title: '生效日期', width: 200},
        // {field: 'e_date', title: '失效日期', width: 300},
        {field: 'remark', title: '备注'}
      ]
      this.tableColumn = tabCols;
    },
    // 表格工具组-多选删除
    handleRemoveEmit(selectRecords) {
      // this.$refs.exBaseTable.$refs.xTable.removeCheckboxRow()
      batchDeleteTransfercurve({
        ...selectRecords
      }).then(({data}) => {
        this.findList()
      })
    },
    // 表格工具组-新增表单弹窗（需要表单组件）
    handleCreateEmit(type) {

      this.getfindCv_code().then((cv_code) => {
        // 重置表单内容
        this.resetFormSubmitData({
          replaceObj: {
            cv_code
          }
        })
        this.dialogStatus = type
        this.dialogFormVisible = true
        this.$nextTick(() => {
          this.$refs.submitForm.$refs['dataForm'].clearValidate()
        })
      })
    },
    // 行内按钮-修改数据弹窗（需要表单组件）
    handleUpdateEmit(row, type) {
      this.formSubmitData = Object.assign({}, row) // copy obj
      this.dialogStatus = type
      this.dialogFormVisible = true
      this.$nextTick(() => {
        this.$refs.submitForm.$refs['dataForm'].clearValidate()
      })
    },
    // 单行删除
    handleRmoveColEmit(row) {
      // this.$refs.exBaseTable.$refs.xTable.remove(row)
      delmarketInteresRateInFo({
        id: row.id,
        m_id: row.m_id
      }).then(({data}) => {
        this.findList()
      })
    },

    /* 表单组件相关 */
    // 更新
    handleFromUpdateDataEmit() {
      upmarketInteresRateInFo({
        ...this.formSubmitData  //检索条件
      }).then(({data}) => {
        this.findList()
      })
    },

    // 增加
    handleFromCreateDataEmit() {
      addmarketInteresRateInFo({
        ...this.formSubmitData,  //检索条件
      }).then(({data}) => {
        this.findList()
      })
    },

    /* 检索相关 */
    // 检索
    searchEventEmit() {
      this.tablePage.currentPage = 1
      this.findList()
    },
    // 重置
    resetSearchEventEmit() {
      // 重置代码...
      this.tablePage.currentPage = 1
      this.findList()
    },
    /* 排序 */
    customSortMethodEmit(property, order) {
      this.sortField = property
      this.sortFlag = order
      this.findList()

    },

    /* 子表格弹出 */
    viewSonTable(row) {
      this.currentRow = Object.assign({}, row) // copy obj
      this.DialogSonTableVisible_title = row.cv_name
      this.DialogSonTableVisible = true
    },

    //发布
    publishStatus(row) {
      releaseTransfercurve({
        id: row.ftcsid
      }).then(({data}) => {
        this.findList()
      })
    },
    // 撤销
    noPublishStatus(row) {
      revokeTransfercurve({
        id: row.ftcsid
      }).then(({data}) => {
        this.findList()
      })
    },

     /* 曲线图对比-选择时间 */
    handleGraphContrast(){
      console.log(' 曲线图对比-选择时间');

      let selectRecords = this.checkboxAllRows
      console.log(selectRecords);
      if (selectRecords.length) {
        this.graphContrastDialogFormVisible = true
        let ids = []
        selectRecords.forEach(item => {
          ids.push(item.id) 
        });
        this.$set(this.graphContrastFormSubmitData,'id',ids.join(','))
      }else{
        this.$message.warning('请先勾选处理项！');
      }

      
    },
    /* 曲线图对比-生成曲线图 */
    handleFromSelectDateEvent(){
      console.log('曲线图对比-生成曲线图');
      console.log(this.graphContrastFormSubmitData);
      findTransfercurvetermlist1({
        ...this.graphContrastFormSubmitData
      }).then(({data})=> {


        this.handleViewChart(data.rows)

        console.log('shuju:',data);
      })
    },
    /* 生成图表 */
    handleViewChart(rows) {

      let tooltipFormatter = `{b}<br />`
      let legendData = []
      let xAxisData = []
      let seriesData = []

      let xAxisArrAll = []
      // 获取选中数据
      // let selectRecords = this.$refs.exBaseTable.$refs.xTable.getCheckboxRecords()
      let selectRecords = rows
      console.log('selectRecordsselectRecords',selectRecords);
      if (selectRecords.length) {

        XEUtils.objectEach(selectRecords, (item, key) => {
          // 获取所有系列legendData
          legendData.push(`${item.cv_name}`)
          tooltipFormatter += `<span style="display:inline-block;margin-right:5px;border-radius:10px;width:9px;height:9px;background-color:${this.lineChartColors[`${key}`]}"></span>\
                	{a${key}}：{c${key}}%<br />`

          XEUtils.objectEach(item.term_rate, (val, key) => {
            // 累计所有X轴元素
            xAxisArrAll.push(val.term_name)
          })
        })
        console.log('xAxisArrAllxAxisArrAll',xAxisArrAll);
        // 去重获取X轴元素，获取显示X轴元素
        xAxisData = XEUtils.uniq(xAxisArrAll)
         console.log('去重获取X轴元素，获取显示X轴元素',xAxisData);
        this.findfindTransfercurvetermlist().then((termArrNew) => {
          console.log('termArrNewtermArrNew',termArrNew);
          let xAxisDataNew = []
          XEUtils.objectEach(termArrNew, (itema, key) => {
            if (XEUtils.includes(xAxisData, itema.term_name)) {
              xAxisDataNew.push(itema.term_name)
            }
          })
          xAxisData = xAxisDataNew

          console.log('排序之后',xAxisData);
            // 重组所有选中数据
            XEUtils.objectEach(selectRecords, (item, key) => {
              let seriesDataData = []
              let termRateArrMap = new Map()
              let termRateArr = {}

              XEUtils.objectEach(item.term_rate, (val, key) => {
                // 累计已知X轴元素数据
                termRateArr[`${val.term_name}`] = val.rate
                termRateArrMap.set(`${val.term_name}`,val.rate);
              })

              console.log('termRateArrMap', termRateArrMap);
              // 获取当前最后一个期限点的key
              let termRateArrLastKey =  Array.from(termRateArrMap.keys()).pop();

              console.log('termRateArrLastKey', termRateArrLastKey);


              // 按照完整的x轴元素 重组完整X轴元素数据
              // XEUtils.objectEach(xAxisData, (val, i) => {
              //   let xVal = termRateArr[`${val}`] || 0
              //   seriesDataData.push(xVal)

              // })
              // 按照完整的x轴元素 重组完整X轴元素数据-跳出循环
              for (let i = 0; i < xAxisData.length; i++) {
                const val = xAxisData[i];
                let xVal = termRateArr[`${val}`] || 0
                seriesDataData.push(xVal)  
                // 如果是最后一个期限点跳出循环
                if (val==termRateArrLastKey) {
                  break;
                }
              }


              console.log('seriesDataData', seriesDataData);

              seriesData.push({
                name: `${item.cv_name}`,
                type: 'line',
                smooth: true,
                data: seriesDataData
              })

            })


            console.log('seriesData', seriesData);
            console.log('tooltipFormatter', tooltipFormatter);

            this.lineChartData = {
              tooltipFormatter,
              legendData,
              xAxisData,
              seriesData
            }

            console.log('this.lineChartData', this.lineChartData);

            this.chartTitle = '曲线图'
            this.DialogChartVisible = true
        })
      } else {
        this.$alert(this.$t('message.msg1'))
        return false;
      }
    },


    /* 导入：文件上传钩子 */
    // 文件上传成功
    /* 上传文件之前的钩子 */
    beforeAvatarUpload(file) {
      // const isJPG = file.type === 'image/jpeg';
      // const isLt2M = file.size / 1024 / 1024 < 200;

      // if (!isJPG) {
      //   this.$message.error('上传头像图片只能是 JPG 格式!');
      // }
      // if (!isLt2M) {
      //   this.$message.error('上传头像图片大小不能超过 200MB!');
      // }
      // return isJPG && isLt2M;
    },
    /* 上传成功 */
    handleSuccess(response, file, fileList) {

    },
    /* 上传失败 */
    handleError(err, file, fileList) {
      alert('上传失败error')
    },
    /* 导出 url */
    handlePushExportUrl() {

      const XEUtilsLocat = XEUtils.locat()
      const hostName = XEUtilsLocat.hostname
      const protocol = XEUtilsLocat.protocol

      // let selectRecords = this.$refs.exBaseTable.$refs.xTable.getCheckboxRecords()
      let selectRecords = this.checkboxAllRows

      console.log(selectRecords);
      if (selectRecords.length) {

        console.log(selectRecords);
        let cvCodes = []
        selectRecords.forEach(item => {
          cvCodes.push(item.cv_code) 
        });
        console.log(cvCodes);
        // this.$refs.xTable.removeCheckboxRow()
          window.location.href =
          this.protocol + '//' +
          this.hostName + ':7001/' + process.env.VUE_APP_DATA_IO_URI_PARAM +
          '/mirf/marketCurveExport?cv_codes=' + cvCodes.join(',');

          // console.log(h);

      } else {
         this.$message.warning('请先勾选处理项！');

        // window.location.href =
        //   this.protocol + '//' +
        //   this.hostName + ':7001/' + process.env.VUE_APP_DATA_IO_URI_PARAM +
        //   '/mirf/marketCurveExport'
      }


      // 跳转示例1：  
      // let routeUrl = this.$router.resolve({
      //   path: "/share",
      //   query: {id:96}
      // });
      // window.open(routeUrl.href, '_blank');

      //  findtransfercurvederive({
      //       page:this.tablePage.currentPage, // 当前页
      //       pageSize:this.tablePage.pageSize, // 每页条数
      //       sortField:this.sortField,
      //       sortFlag:this.sortFlag,
      //       ...this.formSearchData,  //检索条件
      //       }).then(({data}) => {
      //         // 给表格数据赋值
      //         this.tableData = data.rows
      //         // 给分页总数赋值
      //         this.tablePage.totalResult = data.total
      //         // 关闭加载特效
      //         setTimeout(() => {
      //             this.loading = false
      //         }, 0.5 * 1000)
      //     },error => {
      //       // alert(error);
      //     })
      // 跳转示例2：
      // window.open("http://www.baidu.com",'_blank') // 在新窗口打开外链接
      // 跳转示例3：
      // window.location.href =
      //   protocol + '//' +
      //   hostName + ':7001/' + process.env.VUE_APP_DATA_IO_URI_PARAM +
      //   '/mirf/marketCurveExport'; //在本页面打开外部链接
    }


  }, //method-end
  // 生命周期 - 创建完成（可以访问当前this实例）
  created() {
    // 初始化表格字段
    this.initTableCols()
    // 初始化表格数据
    this.findList()

    this.findcurr()
    this.findfindtype()

    let token = store.getters.token || getToken();
    this.$set(this.uploadHeaders, 'Authorization', token)


  },
  // 生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {

  },
  beforeCreate() {
  }, // 生命周期 - 创建之前
  beforeMount() {
  }, // 生命周期 - 挂载之前
  beforeUpdate() {
  }, // 生命周期 - 更新之前
  updated() {
  }, // 生命周期 - 更新之后
  beforeDestroy() {
  }, // 生命周期 - 销毁之前
  destroyed() {
  }, // 生命周期 - 销毁完成
  activated() {
  }, // 如果页面有keep-alive缓存功能，这个函数会触发
}
</script>

<style lang='scss' scoped>


.my-dropdown4 {
  width: 600px;
  height: 300px;
  background-color: #fff;
  border: 1px solid #dcdfe6;
  box-shadow: 0 0 6px 2px rgba(0, 0, 0, 0.1);
}

.upload-demo {
  display: inline-block;
  margin: 0 15px;
  //   .el-button{
  //     box-sizing: border-box;
  //     outline: 0;
  //     margin: 0;
  //     -webkit-appearance: none;
  //     text-align: center;
  //     display: inline-block;
  //     line-height: 1;
  //     white-space: nowrap;
  //     cursor: pointer;
  //     background: #FFF;
  //     border: 1px solid #DCDFE6;
  //     font-size: 12px;
  //     border-radius: 3px;
  //     padding: 7px 15px;
  //     color: #606266;
  //     // background-color: #fff;
  //     // border-color: #dcdfe6;
  // }

}
</style>